<template>
  <div class="image-crop">
    <h2>图片剪裁</h2>
    <el-card class="crop-card">
      <el-upload
        class="upload-demo"
        drag
        action="/api/image/crop"
        :auto-upload="false"
        :on-change="handleChange"
        :show-file-list="false"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          拖拽图片到此处或 <em>点击上传</em>
        </div>
      </el-upload>

      <div class="crop-container" v-if="imageUrl">
        <div class="crop-preview">
          <img :src="imageUrl" ref="imageRef" />
        </div>
        <div class="crop-controls">
          <el-form :model="cropData" label-width="100px">
            <el-form-item label="宽度">
              <el-input-number v-model="cropData.width" :min="1" />
            </el-form-item>
            <el-form-item label="高度">
              <el-input-number v-model="cropData.height" :min="1" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleCrop">开始剪裁</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>

    <el-dialog v-model="showPreview" title="剪裁预览">
      <img :src="croppedImage" alt="剪裁结果" v-if="croppedImage" style="max-width: 100%" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'

const imageUrl = ref('')
const showPreview = ref(false)
const croppedImage = ref('')
const imageRef = ref<HTMLImageElement | null>(null)

const cropData = ref({
  width: 200,
  height: 200,
  left: 0,
  top: 0
})

const handleChange = (file: any) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    imageUrl.value = e.target?.result as string
  }
  reader.readAsDataURL(file.raw)
}

const handleCrop = async () => {
  const formData = new FormData()
  const response = await fetch(imageUrl.value)
  const blob = await response.blob()
  formData.append('image', blob)
  formData.append('width', cropData.value.width.toString())
  formData.append('height', cropData.value.height.toString())
  formData.append('left', cropData.value.left.toString())
  formData.append('top', cropData.value.top.toString())

  try {
    const res = await fetch('/api/image/crop', {
      method: 'POST',
      body: formData
    })
    const data = await res.json()
    if (data.filename) {
      croppedImage.value = `/api/image/download/${data.filename}`
      showPreview.value = true
      ElMessage.success('图片剪裁成功')
    }
  } catch (error) {
    ElMessage.error('图片剪裁失败')
  }
}
</script>

<style scoped>
.image-crop {
  padding: 2rem;
}

.crop-card {
  max-width: 800px;
  margin: 2rem auto;
}

.crop-container {
  margin-top: 2rem;
  display: flex;
  gap: 2rem;
}

.crop-preview {
  flex: 1;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crop-preview img {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
}

.crop-controls {
  width: 300px;
  padding: 1rem;
}
</style> 